@page
@model IdentityServerTemplate.Pages.Admin.Clients.IndexModel

<div class="container-fluid mb-4 px-0">

    <header class="pb-3 mb-4 border-bottom">
        <h1 class=" fw-bold">
            <i class="bi bi-laptop text-brand"></i>
            Clients
        </h1>
        <span class="text-muted">
            A Client is an application that requests access to protected resources on behalf of the resource owner using OAuth 2.0 and OpenID Connect protocols.
        </span>
    </header>

    <div class="d-flex justify-content-end align-items-end bg-body-tertiary p-2 flex-nowrap">

        <!-- Actions: keep dropdown + form together, no wrap -->
        <div class="d-flex align-items-center flex-nowrap gap-2">

            <!-- Create dropdown -->
            <div class="dropdown">
                <button class="btn btn-outline-primary dropdown-toggle text-decoration-none"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    Create Client
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" asp-page="/Admin/Clients/New" asp-route-type="web">Interactive (Web/Native)</a></li>
                    <li><a class="dropdown-item" asp-page="/Admin/Clients/New" asp-route-type="m2m">Machine-to-Machine</a></li>
                </ul>
            </div>

            <!-- Filter/Search form -->
            <form role="search" class="row g-2 flex-grow-1 align-items-end">

                <div class="col-auto">
                    <input class="form-control me-2"
                           type="text"
                           id="filter"
                           name="filter"
                           placeholder="Filter"
                           value="@Model.Filter" />
                </div>

                <div class="col-auto">
                    <button class="btn btn-brand" type="submit">
                        <i class="bi bi-filter"></i>
                        Filter
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>


<table class="table table-hover">
    <thead>
        <tr>
            <th>Client ID</th>
            <th>Name</th>
            <th>Flow</th>
            <th><span class="d-none">Actions</span></th>
        </tr>
    </thead>
    <tbody class="table-group-divider">
        @foreach (var client in Model.Clients)
        {
            <tr>
                <td class="align-middle fw-bold">@client.ClientId</td>
                <td class="align-middle">
                    @if (string.IsNullOrWhiteSpace(client.Name))
                    {
                        <i class='text-muted fst-italic'>None</i>
                    }
                    else
                    {
                        @client.Name
                    }
                </td>
                <td class="align-middle">
                    <code>@client.Flow</code>
                </td>
                <td class="text-end">
                    <a asp-page="/Admin/Clients/Edit"
                       class="btn btn-link text-primary m-0 p-0"
                       asp-route-id="@client.ClientId">
                        <i class="bi bi-pencil-square"></i>
                        <span class="d-none">Edit</span>
                    </a>

                    <button type="submit"
                            class="btn btn-link text-danger m-0 p-0"
                            form="delete-form"
                            name="Input.Button"
                            value="delete"
                            asp-page="/admin/clients/delete"
                            asp-route-clientid="@client.ClientId"
                            data-confirm="Are you sure you want to delete this client?">
                        <i class="bi bi-trash"></i>
                        <span class="d-none">Delete</span>
                    </button>

                </td>
            </tr>
        }
    </tbody>
</table>

<form id="delete-form" method="post" class="d-none"></form>

@if (!Model.Clients.Any())
{
    <div class="row">
        <div class="col">
            <div class="alert alert-light text-center">
                You do not have any Clients configured.<br />
                Click "Create Client" above to begin adding a new client.
            </div>
        </div>
    </div>
}
